<template>
  <div class="app">
    <h2>{{ msg }},学生姓名是：{{ studentName }}</h2>

    <!-- 通过父组件给子组件传递一个函数类型的props实现：子组件给父组件传递数据 -->
    <School :getSchoolName="getSchoolName"></School>
    <!-- 通过父组件给子组件绑定一个自定义的事件对象实现：子给父传递数据(第一种写法用v-on或@) -->
    <!-- <Student v-on:atguigu="getStudentName"></Student> -->
    <!-- <Student @atguigu="getStudentName" @demo="m1"></Student> -->
    <!-- 第二种写法使用ref native调用原生的组件-->
    <Student ref="student" @click.native="show"></Student>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  data() {
    return {
      msg: '你好啊',
      studentName: '',
    }
  },
  components: {
    Student,
    School,
  },
  methods: {
    getSchoolName(name) {
      console.log('App收到了学校名:' + name)
    },
    // getStudentName(name, ...params) {
    //   console.log('App获取到学生名:' + name, params)
    //   this.studentName = name
    // },
    m1() {
      console.log('第二个组件被触发了')
    },
    show() {
      alert('This is a test example')
    },
  },
  mounted() {
    //用回调函数或者箭头函数,否则this的指向不对
    // this.$refs.student.$on('atguigu', this.getStudentName)
    this.$refs.student.$on('atguigu', (name, ...params) => {
      console.log('App获取到学生名:' + name, params)
      this.studentName = name
    })
  },
}
</script>

<style scoped>
.app {
  background-color: azure;
}
</style>
